<template>
  <div class="app" v-loading="!userInfo">
    <template v-if="userInfo">
      <div class="top">
        <div class="head" v-loading="isUploading">
          <img
            class="user-head"
            :src="userInfo.user_head"
            @error="userInfo.user_head = noHeadImage"
          />
        </div>
        <div class="user-info">
          <div class="user-top">
            <div class="user-name">{{ userInfo.user_name }}</div>
            <div class="user-sex">
              <i
                v-if="userInfo.user_sex == 0"
                class="iconfont user_icon user_female icon-xingbie-nv"
              ></i>
              <i
                v-else
                class="iconfont user_icon user_male icon-xingbie-nan"
              ></i>
            </div>
            <div class="user-chat">
              <i
                class="iconfont icon-changyongtubiao-mianxing-25"
                title="发起私聊"
                @click="openChat"
              ></i>
            </div>
          </div>
          <div class="user-detail">
            <template v-if="userInfo.user_birth">
              <i class="iconfont icon-changyongtubiao-mianxing-44"></i>
              <span>{{ userInfo.user_birth }}</span>
            </template>
            <template v-if="userInfo.user_city">
              <i class="iconfont icon-dingwei"></i>
              <span>{{ userInfo.user_city }}</span>
            </template>
            <template v-if="userInfo.user_job">
              <i class="iconfont icon-changyongtubiao-mianxing-23"></i>
              <span>{{ userInfo.user_job }} </span>
            </template>
          </div>
          <div class="remark">{{ userInfo.user_remark }}</div>
        </div>
      </div>

      <div class="bottom">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本资料" name="first">
            <el-empty description="即将上线·敬请期待"></el-empty>
          </el-tab-pane>
          <el-tab-pane label="分享歌单" name="second">
            <div class="song-list" v-if="songList.length > 0">
              <template v-for="item in songList" :key="item.listen_song">
                <div class="song-detail">
                  <div class="song-img">
                    <img
                      :src="item.song.song_pic"
                      @error="item.song.song_pic = noHeadImage"
                    />
                  </div>
                  <div class="song-info">
                    <span class="song-name">
                      {{ item.song.song_name }} -
                      {{ item.song.song_singer }}
                    </span>
                    <div class="song-remark">
                      <span>
                        <i class="iconfont icon-shijian1"></i>
                        {{ formatTime(item.listen_last * 1000) }}
                      </span>
                      <span>
                        <i class="iconfont icon-play-circle"></i>

                        {{ item.listen_count }}
                      </span>
                    </div>
                  </div>
                </div>
              </template>
            </div>
            <div v-if="songList.length == 0"></div>
          </el-tab-pane>
          <el-tab-pane label="广场动态" name="third">
            <!-- <el-empty description="即将上线·敬请期待"></el-empty> -->
            <div class="block">
              <div class="time-line">
                <div class="time-item">
                  <div class="time-stamp"><span>12.12</span><br/><span>2021</span></div>
                  <div class="item-card">
                    <p>
                      这是一条测试的动态.这是一条测试的动态.这是一条测试的动态.这是一条测试的动态.这是一条测试的动态.
                    </p>
                    <div class="image-box">
                      <el-image
                        style="width: 120px; height: 100px"
                        :src="testimage"
                      ></el-image>
                      <el-image
                        style="width: 120px; height: 100px"
                        :src="testimage"
                      ></el-image>
                      <el-image
                        style="width: 120px; height: 100px"
                        :src="testimage"
                      ></el-image>
                      <el-image
                        style="width: 120px; height: 100px"
                        :src="testimage"
                      ></el-image>
                    </div>
                    <div class="card-bottom">
                      <span @click="comment"
                        ><i class="iconfont icon-pingjia"></i>100</span
                      >
                      <span @click="praise" :class="{ likegood: ispraise }">
                        <i class="iconfont icon-icon_likegood"></i>100</span
                      >
                    </div>
                    <div class="comment-box" v-if="iscommentBox">
                      <div class="comment-list">
                        <p @click="replyUser(user2)">
                          <span class="light-user">{{ user2 }}</span
                          >：{{ commentDetails }}
                        </p>
                        <p @click="replyUser(user1)">
                          <span class="light-user">{{ user1 }}</span
                          >回复<span class="light-user">{{ user2 }}</span
                          >：{{ commentDetails }}
                        </p>
                      </div>
                      <div class="message-form">
                        <textarea
                          :placeholder="placeholder"
                          v-model="message"
                          @keydown="messageKeyDown"
                        ></textarea>
                        <el-button
                          class="btn-comment"
                          type="success"
                          size="mini"
                          plain
                          >发送</el-button
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <div class="time-item">
                  <div class="time-stamp"><span>9.27</span><br/><span>2021</span></div>
                  <div class="item-card">
                    <p>
                      这是一条测试的动态.这是一条测试的动态.这是一条测试的动态.这是一条测试的动态.这是一条测试的动态.
                    </p>
                    <div class="card-bottom">
                      <span @click="comment"
                        ><i class="iconfont icon-pingjia"></i>100</span
                      >
                      <span @click="praise" :class="{ likegood: ispraise }">
                        <i class="iconfont icon-icon_likegood"></i>100</span
                      >
                    </div>
                    <div class="comment-box" v-if="iscommentBox">
                      <div class="comment-list">
                        <p @click="replyUser(user2)">
                          <span class="light-user">{{ user2 }}</span
                          >：{{ commentDetails }}
                        </p>
                        <p @click="replyUser(user1)">
                          <span class="light-user">{{ user1 }}</span
                          >回复<span class="light-user">{{ user2 }}</span
                          >：{{ commentDetails }}
                        </p>
                      </div>
                      <div class="message-form">
                        <textarea
                          :placeholder="placeholder"
                          v-model="message"
                          @keydown="messageKeyDown"
                        ></textarea>
                        <el-button
                          class="btn-comment"
                          type="success"
                          size="mini"
                          plain
                          >发送</el-button
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
  </div>
</template>


<script>
export default {
  data() {
    return {
      placeholder: "评论",
      userInfo: false,
      user_id: false,
      noHeadImage: require("@/asset/img/head.jpg"),
      testimage: require("@/asset/img/test.jpeg"),
      songList: [],
      activeName: "first",
      user1: "hamm",
      user2: "清欢",
      commentDetails: "测试评论",
      iscommentBox: false,
      ispraise:false,
    };
  },
  watch: {
    "$store.state.nowApp.data": {
      handler(user_id) {
        if (
          this.$store.state.nowApp.key === "user_profile" &&
          user_id !== this.user_id
        ) {
          this.user_id = user_id;
          this.loadUserInfo();
          this.activeName = "first";
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.$emit("api", {
      event: "setWindowTitle",
      title: "　",
    });
  },
  methods: {
    openChat() {
      this.$emit("api", {
        event: "openApp",
        app: "chat_recent",
        data: this.user_id,
      });
    },
    formatTime(timestamp) {
      return this.tool.formatTime(timestamp, "MM-dd HH:mm");
    },
    loadUserInfo() {
      this.isLoading = true;
      this.request({
        url: "user/getUserInfo",
        method: "POST",
        data: {
          user_id: this.user_id,
        },
        success: (res) => {
          this.userInfo = res.data;
          this.isLoading = false;
        },
        error: () => {
          this.$emit("api", {
            event: "closeApp",
            app: "profile_modify",
          });
          this.$msgbox({
            type: "error",
            message: "读取你的个人资料失败,请重新登录后再试",
            confirmButtonText: "关闭",
            title: "操作失败",
          });
          return true;
        },
      });
    },
    handleClick(tab, event) {
      console.log(this.activeName, tab, event);
      this.isLoading = true;
      switch (this.activeName) {
        case "first":
          break;
        case "second":
          this.request({
            data: {
              user_id: this.user_id,
            },
            method: "POST",
            url: "user/songList",
            success: (res) => {
              this.songList = res.data;
              console.log(this.songList);
            },
            final: () => {
              this.isLoading = false;
            },
          });
          break;
        case "third":
          break;
      }
    },
    /**
     * 点赞
     */
    praise() {
      this.ispraise= this.ispraise == true ? false : true;
    },
    /**
     * 评论
     */
    comment() {
      this.iscommentBox = this.iscommentBox == true ? false : true;
    },
    /**
     * 回复
     */
    replyUser(val) {
      this.placeholder = "回复" + val;
    },
  },
};
</script>
<style scoped lang="scss">
.app {
  display: flex;
  flex: 1;
  width: 100%;
  text-shadow: none;
  justify-content: center;
  flex-direction: column;
  color: #333333;
  .top {
    width: 100%;
    height: 100px;
    border-right: 1px solid #f5f5f5;
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
    .head {
      border-radius: 100%;
      overflow: hidden;
      width: 80px;
      height: 80px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .user-info {
      width: 70%;
      margin-left: 10px;
      .user-top {
        display: flex;
        flex-direction: row;
        .user-name {
          line-height: 20px;
          font-size: 18px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .user-sex {
          flex: 1;
          width: 0px;
        }
        .user-chat {
          .iconfont {
            font-size: 24px;
            color: #666;
            cursor: pointer;
          }
          .iconfont:hover {
            color: #333;
          }
        }
      }
      .user-detail {
        font-size: 12px;
        color: #666;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .iconfont {
          font-size: 14px;
        }
        span {
          margin-right: 5px;
        }
      }
      .remark {
        padding: 5px 15px 0px 0px;
        padding-bottom: 0px;
        font-size: 13px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #999;
      }
    }
  }
  .bottom {
    height: 0px;
    flex: 1;
    padding: 0px 15px;
    display: flex;
    flex-direction: column;
    .song-list {
      overflow-y: scroll;
      height: 390px;
      .song-detail {
        position: relative;
        display: flex;
        padding: 5px;
        margin: 5px 0px;
        border-bottom: 1px solid #eee;
        .song-img {
          img {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            cursor: pointer;
          }
          img:hover {
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
          }
        }
        .song-info {
          padding-left: 5px;
          .song-name {
            margin-left: 5px;
            font-size: 14px;
            margin-left: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .song-remark {
            display: block;
            margin-top: 10px;
            color: #aaa;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 5px;
            span {
              margin-right: 10px;
              .iconfont {
                font-size: 12px;
              }
            }
          }
        }
      }
    }

    .song-list::-webkit-scrollbar {
      display: none;
    }
    //动态广场
    .block {
      .time-line {
        overflow-y: scroll;
        height: 390px;
        padding: 0;
        .time-item {
          display: flex;
          padding-bottom: 10px;
          .time-stamp {
            padding-top:15px;
            text-align: center;
            width: 50px;
            color: #86909c;
             span:nth-of-type(1){
              font-size:16px;
              font-weight: bold;
            }
            span:nth-of-type(2){
              font-size:12px;
            }
          }
          .item-card {
            width: 80%;
            height: auto;
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
            border-radius: 4px;
            border: 1px solid #ebeef5;
            background-color: #fff;
            position: relative;
            padding: 15px;
            left: 0px;
            .image-box {
              .el-image {
                margin: 0px 10px 5px 0px;
              }
            }
            p {
              font-size: 14px;
              margin: 0px 10px 10px 0px;
            }
            .card-bottom {
              font-size: 10px;
              span {
                cursor: pointer;
                margin-right: 50px;
                .iconfont{
                  font-size:12px;
                  margin-right: 4px;
                }
              }
            }
            .comment-box {
              margin-top: 10px;
              border-top: 1px solid #e1e1e2;
              .comment-list {
                p { 
                  font-size:13px;
                  cursor: pointer;
                  margin: 2px 0px;
                  .light-user {
                    margin: 0px 3px;
                    color: #53a8ff;
                  }
                }
              }
              .message-form {
                margin: 10px 0px 0 0px;
                height: 65px;
                border: 1px solid rgb(144, 207, 159);
                border-radius: 4px;
                padding: 5px 5px 0 5px;
                position: relative;
                textarea {
                  font-size:12px;
                  border: none;
                  width: 98%;
                  height: 50%;
                  resize: none;
                  outline: none;
                  background-color: transparent;
                }
                .btn-comment {
                  width: 55px;
                  height: 25px;
                  position: absolute;
                  right: 3px;
                  bottom: 3px;
                }
              }
            }
          }
        }
      }
      .time-line::-webkit-scrollbar {
        display: none;
      }
    }
  }
  .icon-xingbie-nv {
    margin-left: 8px;
    color: #f288a4;
  }
  .icon-xingbie-nan {
    margin-left: 8px;
    color: #759fd1;
  }
  .likegood{
    color: #e68d39;
  }
}
</style>